<template>
  <!-- 在途货物 -->
  <div class="goods">
    <div class="header">
      <h3 class="line">在途货物</h3>
    </div>
    <div class="footer">
      <el-card style="height:95%">
        <el-tabs v-model="activeName">
          <el-tab-pane label="在途货物" name="first">
            <onr v-if="activeName === 'first'"/>
          </el-tab-pane>
          <el-tab-pane label="订单变更" name="second">
            <orderChange v-if="activeName === 'second'"/>
          </el-tab-pane>
          <el-tab-pane label="订单通知" name="third">
            <orderNotices v-if="activeName === 'third'"/>
          </el-tab-pane>
          <el-tab-pane label="订单取消" name="fourth">
            <orderCancel v-if="activeName === 'fourth'"/>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import onr from "./components/onr.vue";
import orderChange from "./components/orderChange.vue";
import orderNotices from "./components/orderNotice.vue";
import orderCancel from "./components/orderCancel.vue";
export default {
  name: "transitGoods",
  data() {
    return {
      activeName: "first",
    };
  },
  components: {
    onr,
    orderChange,
    orderNotices,
    orderCancel,
  },
  methods: {
  },
};
</script>

<style scoped lang="scss">
.goods {
  font-size: 16px;
  height: 100%;
  .header {
    h3 {
      font-weight: bold;
    }
  }

  .line::before {
    content: " ";
    width: 8px;
    height: 20px;
    background: #0782eb;
    display: inline-block;
    vertical-align: text-bottom;
    margin: 0px 5px;
  }

  .footer {
    margin: 10px;
    height: 100%;
  }
}</style>